<template>
	<view>
		<custom-navbar titleText="首页" :isHome="true" @getNavBarHeight="handleNavBarHeight"></custom-navbar>
		<!-- 公告区 -->
		<view :style="'margin-top:'+navbarHeight+'rpx;'">
			<uni-notice-bar single showIcon showClose text="点击右上角“添加到我的小程序”，方便下次找到！"></uni-notice-bar>
<!-- 			<view class="weui-cell" style="background:#fff9eb;">
				<view class="weui-cell__hd">
					<image src="/static/images/ic_myapp.png"
						style="display:block;width:40rpx;height:40rpx;margin-right:14rpx;"></image>
				</view>
				<view class="weui-cell__bd">
					<text style="color:#be9719;font-size:13px;">点击右上角“添加到我的小程序”，方便下次找到！</text>
				</view>
				<view class="weui-cell__ft">
					<image src="/static/images/modal_closer.png" style="display:block; width: 30rpx;height:30rpx;">
					</image>
				</view>
			</view> -->
		</view>
		<!-- 轮播图 -->
		<view v-if="slides && slides.length > 0" class="index-swiper">
			<swiper autoplay circular :interval="4000" :duration="500">
				<block v-for="(item,index) in slides" :key="index">
					<swiper-item>
						<image :src="item.pic_image_url" mode="widthFix" show-menu-by-longpress :data-index="index">
						</image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 快捷入口2 -->
		<view v-if="nav2s && nav2s.length > 0" class="nav2-list">
			<block v-for="(item,index) in nav2s" :key="index">
				<view class="nav2-item" @click="onNav2Tap" :data-index="index">
					<view class="nav2-pic">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
				</view>
			</block>
		</view>
		<!-- 快捷入口5 -->
		<view v-if="navs && navs.length > 0" class="nav-list">
			<block v-for="(item,index) in navs" :key="index">
				<view class="nav-item" @click="onNavTap" :data-index="index">
					<view class="nav-pic">
						<image :src="item.pic_image_url"></image>
					</view>
					<view class="nav-text">{{item.title}}</view>
				</view>
			</block>
		</view>
		<!-- 医院列表 -->
		<view class="weui-cells hosp-list">
			<view v-for="(item, index) in hospitals" :key="item._id" :data-hid="item._id" @click="toHospital"
				class="weui-cell hosp-item weui-cell_access">
				<view class="weui-cell__hd">
					<image class="hosp-avatar" mode="aspectFill"
						:src="item.avatar ? item.avatar_url : '/static/images/avatar.jpg'">
					</image>
				</view>
				<view class="weui-cell__bd">
					<view>
						<text class="hosp-name">{{ item.name }}</text>
					</view>
					<view class="hosp-line">
						<text class="hosp-rank">{{ item.rank }}</text>
						<text class="hosp-label">{{ item.label }}</text>
					</view>
					<view class="hosp-line">
						<text class="hosp-intro">{{ item.intro }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		toRaw
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 定义轮播图数据
	const slides = ref([]);
	// 快捷入口2
	const nav2s = ref([]);
	// 快捷入口多个
	const navs = ref([]);
	// 医院列表
	const hospitals = ref([]);
	// navbar高度
	const navbarHeight = ref(0);
	// 获取custom-navbar组件高度
	const handleNavBarHeight = (height) => {
		navbarHeight.value = height;
	}
	// 跳转搜索页面
	const gotoSearchPage = () => {
		uni.navigateTo({
			url: "/pages/search/search"
		})
	}

	// 云对象
	const accompanyIndexObj = uniCloud.importObject("accompanyIndexObj");
	// 云对象方法
	const index = async () => {
		let res = await accompanyIndexObj.index();
		slides.value = res.slides;
		nav2s.value = res.nav2s;
		navs.value = res.navs;
		hospitals.value = res.hospitals;
	}

	onLoad(() => {
		index();
	})

	const toHospital = (e) => {
		uni.navigateTo({
			url: '/pages/hospital/index?hid=' + e.currentTarget.dataset.hid
		})
	}
	
	const onNavTap = (e) => {
		const nav = toRaw(navs.value)[e.currentTarget.dataset.index]
		uni.navigateTo({
			url: nav.stype_link
		})
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.index-swiper {
		padding: 20rpx 20rpx 0 20rpx;
		overflow: hidden;
	}

	.index-swiper swiper {
		height: 320rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.index-swiper swiper-item image {
		width: 100%;
		height: 100%;
	}

	.nav2-list {
		margin: 0 20rpx;
	}

	/*这段 CSS 代码是经典的 清除浮动（clearfix）方案，专门用于解决父容器因包含浮动子元素而产生的 “高度塌陷” 问题*/
	.nav2-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav2-item {
		float: left;
		margin-top: 20rpx;
		width: 50%;
		text-align: center;
		box-sizing: border-box;
		padding: 10rpx 5rpx;
	}

	.nav2-pic {
		width: 100%;
	}

	.nav2-pic image {
		display: block;
		width: 100%;
	}

	.nav-list {
		padding: 20rpx 20rpx 0 20rpx;
	}

	/*这段 CSS 代码是经典的 清除浮动（clearfix）方案，专门用于解决父容器因包含浮动子元素而产生的 “高度塌陷” 问题*/
	.nav-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav-item {
		float: left;
		width: 20%;
		text-align: center;
		padding: 10rpx 0;
	}

	.nav-pic image {
		display: block;
		margin: 0 auto;
		width: 110rpx;
		height: 110rpx;
	}

	.nav-text {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
	}

	.hosp-avatar {
		display: block;
		width: 200rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.hosp-name {
		font-weight: bold;
		font-size: 34rpx;
	}

	.hosp-line {
		margin-top: 5rpx;
	}

	.hosp-line text {
		font-size: 26rpx;
	}

	.hosp-rank {
		font-weight: bold;
		color: #0bb585;
		margin-right: 15rpx;
	}

	.hosp-label {
		font-weight: bold;
		color: #0ca7ae;
		margin-right: 15rpx;
	}

	.hosp-intro {
		color: #999999;
	}
</style>